<template>
    <el-dialog
            title="路线确认"
            :visible.sync="dialogVisible"
            width="60%">
        <el-form  ref="ruleForm" v-if="dialogVisible" label-width="100px" class="demo-ruleForm">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="发车地：">
                        {{start.address}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="目的地：">
                        {{end.address}}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="描述：">
                <p v-html="msg"></p>
            </el-form-item>
        </el-form>
        <div id='allmap' style="width: 100%;height: 350px"></div>
    </el-dialog>
</template>

<script>
    export default {
        name: "route",
        data(){
            return{
                msg:"",
                dialogVisible:false,

                start:null,
                end:null,
            }
        },
        methods:{

            openDia(start,end){
                this.$data=this.$options.data();
                this.start=start;
                this.end=end;
                this.dialogVisible=true;
                this.$nextTick(() => {
                    this.initMap();
                })
            },

            initMap(){
                var vm=this;
                var map = new BMapGL.Map("allmap");
                map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);
                var output = "从<span style='color:#1AA093;'>"+this.start.address+"</span>到<span style='color:#1AA093;'>"+this.end.address+"</span>驾车需要";
                var searchComplete = function (results){
                    if (transit.getStatus() != BMAP_STATUS_SUCCESS){
                        return ;
                    }
                    var plan = results.getPlan(0);
                    output += plan.getDuration(true) + "\n";                //获取时间
                    output += "总路程为：" ;
                    output += plan.getDistance(true) + "\n";             //获取距离
                }
                var transit = new BMapGL.DrivingRoute(map, {renderOptions: {map: map},
                    onSearchComplete: searchComplete,
                    onPolylinesSet: function(){
                        setTimeout(res=>{
                            vm.msg=output;
                        },100)
                        /*setTimeout(function(){alert(output)},"1000");*/
                    }});
                var start=new BMapGL.Point(this.start.lng,this.start.lat);
                var end=new BMapGL.Point(this.end.lng,this.end.lat);
                transit.search(start, end);
            },
        }
    }
</script>

<style scoped>

</style>
